<template>
  <div class="qyui-cell row qyui-container">
    <div class="qyui-cell" style="height:35px">
      <el-button type="primary" @click="handleAddParamter">
        新增输出参数
      </el-button>
      <el-button type="danger" @click="handleDeleteParameter">
        删除输出参数
      </el-button>
    </div>

    <div class="qyui-cell col qyui-container">
      <div class="qyui-cell" style="width:300px">
        <div class="qyui-cell row">
          <el-tree
            :data="treeData"
            default-expand-all
            node-key="id"
            :expand-on-click-node="false"
            highlight-current
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
      </div>

      <div class="qyui-cell row">
        <div class="qyui-card">
          <div class="qyui-card-title">
            存储过程参数
          </div>
          <div class="qyui-card-body">
            <el-form>
              <el-form-item label="存储过程名称">
                <el-input v-model="manager.ProcedureData.Name" type="text" placeholder="请输入存储过程名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" icon="Finished" plain @click="checkDataSource">
                  验证数据源
                </el-button>
              </el-form-item>
            </el-form>
            <div class="qyui-cell row">
              <ul class="qyui-ul">
                <template v-for="(item) in manager.Parameters" :key="item.Name">
                  <li>
                    {{ item.Name }} - {{ item.ValueType }}
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['manager'],
  data: function () {
    return {
      currentDataTableIndex: -1,

    };
  },
  computed: {
    treeData() {
      const list = [];
      this.manager.ProcedureData.Tables.forEach(item => {
        const children = [];
        item.Fields.forEach(field => {
          children.push({ id: field.Name, type: 'field', label: field.Name });
        });
        list.push({ id: item.Name, label: item.Name, type: 'table', children: children });
      });
      return list;
    },
  },
  mounted: function () {
  },
  methods: {
    handleNodeClick(data, node) {
      if (data.type === 'table') {
        const index = this.manager.AllDataSets.findIndex(a => a.Name === data.label);
        this.currentDataTableIndex = index;
      }
    },
    handleSelectDataSet: function (index) {
      this.currentDataTableIndex = index;
    },
    handleAddParamter() {
      this.$prompt('输入返回游标名称', 'Tip', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          this.manager.ProcedureData.Tables.push(
            {
              Name: value,
              Fields: [],
            });
        })
        .catch(() => {

        });
    },
    handleDeleteParamter() {
      this.manager.ProcedureData.Tables.splice(this.currentDataTableIndex, 1);
      if (this.manager.ProcedureData.Tables.length > 0) {
        if (this.currentDataTableIndex > 0) {
          this.currentDataTableIndex = this.currentDataTableIndex - 1;
        }
      } else {
        this.currentDataTableIndex = -1;
      }
    },
    async checkDataSource() {
      const data = {
        isProc: true,
        sql: '',
        parameters: this.manager.Parameters,
        tableNames: [],
      };

      data.sql = this.manager.ProcedureData.Name;
      this.manager.ProcedureData.Tables.forEach(item => {
        data.tableNames.push(item.Name);
      });

      const res = await this.$http({ url: 'api/ZSReport/GetRDLDataSourceResult', method: 'post', data });
      if (res) {
        const list = res.list;
        this.manager.ProcedureData.Tables = list;
      }
    },

  },

};
</script>

<style>
</style>
